<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>系统配置</title>

        <!-- Bootstrap -->
        <link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="./bootstrapvalidator/css/bootstrapValidator.min.css" rel="stylesheet">

    </head>
    <body>
        <h1>系统配置</h1>
        <hr />
        <form class="form-horizontal" id="defaultForm">
            <div class="form-group">
                <label for="host" class="col-sm-2 control-label">数据库IP地址</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="host" name="host" placeholder="host">
                </div>
                <p class="help-block col-sm-5">如：本地(localhost),192.168.31.20</p>
            </div>
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="username" id="username" placeholder="username">
                </div>
                <p class="help-block col-sm-5">数据库账号 root</p>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="password" id="password" placeholder="password">
                </div>
                <p class="help-block col-sm-5">数据库密码 root</p>
            </div>
            <div class="form-group">
                <label for="port" class="col-sm-2 control-label">端口</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" value="3306" name="port" id="port" placeholder="port">
                </div>
                <p class="help-block col-sm-5">数据库 端口</p>
            </div>

            <div class="form-group">
                <label for="database" class="col-sm-2 control-label">数据库名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="database" id="database" placeholder="database">
                </div>
                <p class="help-block col-sm-5">数据库名</p>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-5">
                    <button type="submit" id="validateBtn" class="btn btn-default">确定</button>
                    <div id="alt"></div>
                </div>
            </div>

        </form>

        <div id="log"></div>

        <script src="./jquery/jquery.min.js"></script>
        <script src="./jquery/jquery.extends.js"></script>
        <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="./bootstrapvalidator/js/bootstrapValidator.min.js"></script>
        <script type="text/javascript">
            var DispatcherHandle = 'test';

            // 数据验证
            $('#defaultForm').bootstrapValidator({
//        live: 'disabled',
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    host: {
                        validators: {
                            notEmpty: {
                                message: '数据库ip不可为空'
                            }
                        }
                    },
                    username: {
                        validators: {
                            notEmpty: {
                                message: '不可为空'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'The username is required and cannot be empty'
                            },
                        }
                    },
                    port: {
                        validators: {
                            notEmpty: {
                                message: '不可为空'
                            }
                        }
                    },
                    database: {
                        validators: {
                            notEmpty: {
                                message: '不可为空'
                            }
                        }
                    },

                }
            })
            .on('success.form.bv', function(e) {
                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var $form = $(e.target);

                var formData = $form.serializeFormJSON();
                formData['oper'] = 'save';

                var obj = {type: "saveSetting", params: formData};
                var res = DispatcherHandle.dispatcher(JSON.stringify(obj));


                var resObj = JSON.parse(res);

                $('#log').html(res + '--' +(resObj.code != '0'));

                if(resObj.code != '0') {
                    $('#alt').html('<div class="alert alert-danger" role="alert">'+resObj.msg+'</div>');
                } else {
                    $('#alt').html('<div class="alert alert-success" role="alert">保存成功!</div>');
                }
            });

            setTimeout(function(){


                var obj = {type: "readSetting", params: {oper:"read"}};
                var res = DispatcherHandle.dispatcher(JSON.stringify(obj));
                var resObj = JSON.parse(res); // {"database":"auto_code","code":1001}

                for(var key in resObj) {
                    $('#'+key).val(resObj[key]);
                }

            }, 1000);

        </script>

<!--      表单验证  https://github.com/nghuuphuoc/bootstrapvalidator-->
    </body>
</html>